<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>产品列表页面</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/sameStyle.css">
	<link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" type="text/css" href="fonts/iconfont.css">
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <div class="container">
            <!-- 头部导航左侧 -->
            <ul class="top-nav-l">
                <li class="menu">
                    <a href="""><span class="iconfont icon-start"></span>收藏鲜花网(hua.com)</a>
                </li>
                <li class="menu dropdown">
                    <a href=""><span class="iconfont icon-weixin"></span>关注微信</a>
                    <div class="dropdown-menu dropdown-weixin">
                        <img src="https://img02.hua.com/pc/pimg/wechat_qrcode.jpg" height="124" width="124">
                        <p>扫码关注<br>回复"礼物" 更多惊喜！</p>
                    </div>
                </li>
                <li class="menu dropdown">
                    <a href="" ><span class="iconfont icon-phone2"></span>花礼网app</a>
                    <div class="dropdown-menu dropdown-weixin">
                        <img src="https://img02.hua.com/pc/pimg/app_qrcode.jpg" height="124" width="124">
                        <p>新人专享100元APP礼包</p>
                    </div>
                </li>
            </ul>
            <!-- 头部导航左侧 -->
            <ul class="top-nav-r">
                <li class="menu login" id="LoginInfo"><a href="" >你好，请登录</a><a href="">注册</a></li>
                <li class="rborder"></li>
                <li class="menu"><a href="">订单查询</a></li>
                <li class="rborder"></li>
                <li class="menu dropdown"> <a href="" >我的花礼</a></li>
                <li class="rborder"></li>
                <li class="menu dropdown">
                    <a href="">客户服务<span class="glyphicon glyphicon-triangle-bottom"></span></a>
                    <div class="dropdown-menu dropdown-service">
                        <a href="">在线付款</a>
                        <a href="">帮助中心</a>
                        <a href="">售后服务</a>
                        <a href="">配送范围</a>
                        <a href="">留言反馈</a>
                    </div>
                </li>
                <li class="rborder"></li>
                <li class="menu dropdown">
                    <a href="shopCar.html" >
                        <span class="iconfont icon-gouwuche"></span>购物车<span class="text-primary" id="gwcCount"></span><span class="glyphicon glyphicon-triangle-bottom"></span>
                    </a>
                </li>
                <li class="rborder"></li>
                <li class="menu slogan">鲜花速递</li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <header>
        <div class="logo">
            <h1><a href="" class="logo-bd">鲜花</a></h1>
            <span></span>            
            <h2>中国鲜花礼品网 始于2005，简称花礼网</h2>
        </div>
        <!--搜索框-->
        <div class="search">
            <form name="i_search" method="post" action="">
                <div class="input-group">
                    <input name="keyword" type="text" class="form-control" placeholder="商品关键词">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">搜索</button>
                    </span>
                </div>
            </form>
            <!-- 关键字部分 -->
            <span class="help-block">
                 <a href="">红玫瑰</a> | <a href="">永生花</a> | <a href="">生日鲜花</a> | <a href="">金玫瑰</a>
            </span>
        </div>
        <!-- 联系方式 -->
        <div class="service">
            <span class="iconfont icon-dianhua"></span>400-889-8188
            <span class="rborder"></span>
            <a href="" ><span class="iconfont icon-kefu"></span>在线客服</a>
        </div>
    </header>
    <!-- 导航条 -->
    <nav class="common">
      <div class="container">
        <div class="categorys dropdown">
            <h3 class="categorys-title">
                <a href=""><span class="pull-right glyphicon glyphicon-menu-down iconfont icon-xiangxia"></span>全部商品导购</a>
            </h3>

            <div class="dropdown-menu dropdown-cate">
                <h4><a href="">鲜花</a></h4>
                <ul class="cate-list list-inline">
                    <li><a href="">爱情鲜花</a></li>
                    <li><a href="">友情鲜花</a></li>
                    <li><a href="">生日鲜花</a></li>
                    <li><a href="">问候长辈</a></li>
                    <li><a href="">祝贺鲜花</a></li>
                    <li><a href="">婚庆鲜花</a></li>
                    <li><a href="">探病慰问</a></li>
                    <li><a href="">道歉鲜花</a></li>
                    <li><a href="">开业花篮</a></li>
                </ul>               
                <h4><a href="">永生花</a></h4>
                <ul class="cate-list list-inline">
                    <li><a href="">经典花盒</a></li>
                    <li><a href="">巨型玫瑰</a></li>
                    <li><a href="">薰衣草</a></li>
                    <li><a href="">永生瓶花</a></li>
                    <li><a href="">特色永生花</a></li>
                </ul>
            </div>
        </div>
        <ul class="nav">
            <li><a href="">首页</a></li>
            <li><a href="">鲜花</a></li>
            <li><a href="">永生花</a></li>
            <li><a href="">蛋糕</a></li>
            <li><a href="">礼品</a></li>
            <li><a href="">巧克力</a></li>
            <li><a href="">花语大全</a></li>
            <li><a href="">设计师臻选鲜花</a></li>            
        </ul>
      </div>
    </nav>

    <!-- 商品列表选择部分 -->
	<ul id="list">
     <!--  <li>
         <div class="box">
             <a href="" class="img"><img src="img/1.jpg"></a>
             <p class="pirce">￥230</p>
             <a href="" class="mainTitle">今华方 五得利晶爽饺子王 5kg 麦芯粉半透明面粉 水饺馄饨面条专用粉 10斤 免邮</a>
             <div class="operate">
     				  <a href="##" class="attention"><i class="iconfont icon-shoucang"></i>收藏</a>
     				  <a href="##" class="btn"><i class="iconfont icon-gouwuche"></i>加入购物车</a>
             </div>
           
         </div>
     </li>  -->
    </ul>
    <!-- <a href="cart.html" class="addcar">查看购物车</a> -->

	<script src="js/pool.js"></script>
    <script>
    var obj = [{
    "id": "01",
    "title": "为爱相随----多头百合1枝，戴安娜粉玫瑰11枝",
    "minTitle":"为爱相随",
    "oldPrice": "￥229",
    "pirce": "￥179",
    "img": "img/1.jpg",
    "types": "鲜花 编 号：9012033",
    "material": "多头百合1枝，戴安娜粉玫瑰11枝，搭配适量黄莺、满天星",
    "pack": "内层淡紫色棉纸，外层粉色牛油瓦楞纸，紫红色缎带花结",
    "flowerLanguage": "你若不离，我必不弃。爱情是历经风雨的双手紧握；是一路同行的相濡以沫。"
}, {
    "id": "02",
    "title": "甜美公主----白玫瑰22枝，粉佳人粉玫瑰14枝，粉色桔梗5枝",
    "minTitle":"甜美公主",
    "oldPrice": "￥485",
    "pirce": "￥378",
    "img": "img/2.jpg",
    "types": "鲜花 编 号：9012154",
    "material": "各色玫瑰共36枝：白玫瑰22枝，粉佳人粉玫瑰14枝；粉色桔梗5枝，尤加利0.5扎",
    "pack": "绿色/浅绿色双面人造纸，白咖罗纹带花结",
    "flowerLanguage": "再多一点点距离，我就能靠近你。清晰甜美的空气里，爱你到不能呼吸。"
}, {
    "id": "03",
    "title": "真诚祝愿----花篮",
    "minTitle":"真诚祝愿",
    "oldPrice": "￥318",
    "pirce": "￥248",
    "img": "img/3.jpg",
    "types": "鲜花 编 号：9012054",
    "material": "粉色香水百合3枝，红色康乃馨11枝，天堂鸟2枝，跳舞兰5枝，填充适量红色多头康和香槟色桔梗，散尾葵（编织）4枝，绿叶适量",
    "pack": "有柄花篮一个（花篮款式以各城市实际出货为准）",
    "flowerLanguage": "所有美丽都源于真挚与坦诚，虽然幸福会转瞬即逝，快乐却能持久，一份诚挚的祝福，一份真诚的问候，愿你快乐每一天！"
}, {
    "id": "04",
    "title": "一往情深----精品玫瑰礼盒:19枝红玫瑰，勿忘我适量",
    "minTitle":"一往情深",
    "oldPrice": "￥315",
    "pirce": "￥245",
    "img": "img/4.jpg",
    "types": "鲜花-鲜花礼盒 编 号：9010966",
    "material": "高档礼盒装鲜花:19枝红玫瑰，勿忘我适量",
    "pack": "牛皮纸和深咖啡色条纹纸，银色缎带花结，魔力铁山灰包装盒",
    "flowerLanguage": "你的轻柔像阵微风，让我从容不迫，想让你知道，我对你始终一往情深。"
}, {
    "id": "05",
    "title": "浪漫的味道----香槟玫瑰33枝，红豆3枝",
    "minTitle":"浪漫的味道",
    "oldPrice": "￥465",
    "pirce": "￥362",
    "img": "img/5.jpg",
    "types": "鲜花 编 号：9010817",
    "material": "香槟玫瑰33枝，红豆3枝",
    "pack": "内层黄色不织布，外层灰蓝绝色纸，香芋紫人造双面纸，玻璃纸，白蓝色罗纹带",
    "flowerLanguage": "味道,像夏天的温暖,和春天的温润,忘不了的味道,在思念里萦绕!"
}, {
    "id": "06",
    "title": "花香四溢----粉色桔梗1扎",
    "minTitle":"花香四溢",
    "oldPrice": "￥203",
    "pirce": "￥158",
    "img": "img/6.jpg",
    "types": "鲜花 编 号：9012124",
    "material": "粉色桔梗1扎",
    "pack": "白色opp雾面纸 白绿罗纹带",
    "flowerLanguage": "花香四溢蝶儿飞，翩翩起舞令人醉，在这美丽的季节，寻找最美的你！"
}, {
    "id": "07",
    "title": "永远的幸福----白玫瑰9枝，蓝绣球1枝，黄金球5枝",
    "minTitle":"永远的幸福",
    "oldPrice": "￥251",
    "pirce": "￥196",
    "img": "img/7.jpg",
    "types": "鲜花 编 号：9012119",
    "material": "白玫瑰9枝，蓝绣球1枝，黄金球5枝，叶上花7枝",
    "pack": "内层白色雪梨纸， 外层蓝色绝色纸 玻璃纸 白绿宽罗纹带",
    "flowerLanguage": "真心付出，信仰着爱的呵护，你永远的幸福，是送我最好的礼物！"
}, {
    "id": "08",
    "title": "春韵----白色紫罗兰2扎、粉色洋桔梗1扎",
    "minTitle":"春韵",
    "oldPrice": "￥473",
    "pirce": "￥369",
    "img": "img/8.jpg",
    "types": "鲜花-特色鲜花 编 号：9012278",
    "material": "白色紫罗兰2扎、粉色洋桔梗1扎，斑春兰0.5扎（斑春兰如缺货可用尤加利替代）",
    "pack": "矮身圆肚玻璃花瓶系丝带",
    "flowerLanguage": "春天到了，爱会到达，会抵达牵挂。"
}];
	  
    var oList = document.getElementById("list");
    var str = "";
    var data = {};
    for(var i=0;i<obj.length;i++){
    	str+=`<li>
          <div class="box" data-id="${obj[i].id}">
              <a href="##" class="img"><img src="${obj[i].img}" class="onimg"></a>
              <p class="pirce">${obj[i].pirce}</p>
              <a href="##" class="mainTitle">${obj[i].title}</a>
              <div class="operate">
				  <a href="##" class="attention"><i class="iconfont icon-shoucang"></i>收藏</a>
				  <a href="##" class="btn"><i class="iconfont icon-gouwuche"></i>加入购物车</a>
              </div>            
          </div>
      </li> `;
    }
    oList.innerHTML = str;
    var clickCount=0;
    var gwcCount=document.getElementById("gwcCount");
    oList.onclick=function(e){
    	var e = e||event;
    	var target = e.target ||e.srcElement;
    	//当点击标题或者图片的时候
    	if((target.tagName == "A" && target.className == "mainTitle")||(target.tagName == "IMG" && target.className == "onimg")){
    		var num1=target.parentNode.parentNode.getAttribute("data-id");
    		location.href="product.html?"+num1;
    		// console.log(aaa);
    	}

        // 点击加入购物车时保存cookie数据
        if(target.tagName == "A" && target.className == "btn"){
            clickCount++;
            gwcCount.innerHTML="("+clickCount+")";
            var num2 = target.parentNode.parentNode.getAttribute("data-id");
            //将这个商品的id存在对象里面
            var n = data[num2];
            //如果这个商品的id是在这个对象里面第一次出现那么n肯定是undefined
            if(!n){
                //n赋值成1  然后在将n给商品的id  因为点击一次商品第一个的时候肯定是1
                n = 1;
                data[num2] = n;
            }else{
                //如果商品id在data里面出现过一次了那么n肯定是有数据的所有不是undefined所以可以直接++
                n++;
                data[num2] = n;
            }
            //将对象转换为字符串然后存入cookie 在另一个页面就可以访问了
            var dataStr = JSON.stringify(data);
            setCookie("init_",dataStr,10);
            
        }



    }





   
      
        






      
</script>
<script>
    // 添加类名open
    var drop=document.querySelectorAll(".dropdown");
      for(var i=0;i<drop.length;i++){
        drop[i].onmouseenter=function(){
            this.classList.add("open");
        }
        drop[i].onmouseleave=function(){
            this.classList.remove("open");
        }
      }
</script>
</body>
</html>